<template>
    <div class="table">
        <div class="container">
            <div style="width:100%;height: 90px;">
                <el-col :span="16">
                    <el-row :gutter="20" class="mgb20">
                        <el-col :span="8">
                            <el-card shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-1">
                                    <i class="el-icon-lx-friendaddfill grid-con-icon"></i>
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{recharge||0}}</div>
                                        <div>充值统计</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-1">
                                    <i class="el-icon-lx-profile grid-con-icon"></i>
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{consume}}</div>
                                        <div>消费统计</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </div>
            <br><br>
            <div class="handle-box">
                <!--<el-input placeholder="采购商名" v-model="purchaser" class="input-with-select handle-input" ></el-input>-->
                <el-input placeholder="手机号" v-model="mobile" class="input-with-select handle-input" ></el-input>
                <el-date-picker
                    v-model="dateTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-select v-model="type" placeholder="订单状态" style="width:150px;">
                    <el-option label="充值" value="1"></el-option>
                    <el-option label="消费" value="2"></el-option>
                </el-select>
                <!--<el-select v-model="paymentState" placeholder="订单支付状态" style="width:150px;">-->
                <!--<el-option label="未付款" value="0"></el-option>-->
                <!--<el-option label="已付款" value="1"></el-option>-->
                <!--</el-select>-->
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <!--<el-button type="primary" @click="add" style="">添加管理员</el-button>-->
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" style="width: 100%; margin-top: 20px">
                <el-table-column prop="mobile" label="客户手机号" sortable width="145"></el-table-column>
                <el-table-column label="金额" sortable width="145">
                    <template slot-scope="scope">
                        {{scope.row.status.name}}{{scope.row.changeGold}}
                    </template>
                </el-table-column>
                <el-table-column prop="orderNo" label="订单号" width=""></el-table-column>
                <el-table-column prop="type.name" label="类型" sortable  width="150"></el-table-column>
                <el-table-column label="创建时间" sortable>
                    <template slot-scope="scope">
                        {{scope.row.createTime | getCurrentTime}}
                        <!--getCurrentTime  createTime-->
                    </template>
                </el-table-column>
                <!--<el-table-column prop="remark" label="备注"></el-table-column>-->
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="订单详情" :visible.sync="editVisible" width="70%">
            <orderDetail v-if="editVisible" :uid="uid" ref="managerAdd" @done="roleDone"></orderDetail>
        </el-dialog>
        <!-- 编辑弹出框 -->
        <el-dialog :title="diaTitle" :visible.sync="cancelOrder" width="50%">
            <orderCancel v-if="cancelOrder" :uid="uid" ref="managerAdd" @done="roleDone"></orderCancel>
        </el-dialog>
        <!--修改收货地址-->
        <el-dialog title="修改收货地址" :visible.sync="updataAdd" width="70%">
            <el-form label-width="100px" class="demo-ruleForm">
                <addressLink v-if="updataAdd" :editInfo="editInfo" v-on:addressChange="choosed" ref="addressLink"></addressLink>
                <el-form-item label="详细地址" prop="name" :rules="rules">
                    <el-input v-model="name" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                    <el-button @click="resetForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
    import orderDetail from '@/components/module3/Order-detail'
    import orderCancel from '@/components/module3/Order-cancel'
    import bus from '../common/bus'
    import pub from '../../utils/pub'
    export default {
        components: {
            orderDetail,orderCancel
        },
        name: 'transRecord',
        data() {
            return {
                name: '',
                rules: {
                    name: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                    ],
                },
                orderNo: '',
                mobile: '',
                type: '',
                dateTime: [],

                isData:false,

                tableData:[],
                recharge: '',
                consume: '',

                getCurrentTime: {},

                pageSize:0,
                totalRow:0,
                currentPage1:0,

                editVisible: false,
                cancelOrder:false,
                diaTitle:'',
                updataAdd:false,
            }
        },
        created(){
            this.getData('1')
        },
        filters:{
            paymentState(value){
                let str = '';
                if(value==='0'){
                    str = '未付款';
                }
                if(value==='1'){
                    str = '已付款';
                }
                return str;
            },
            deliveryState(value){
                let str = '';
                if(value==='0'){
                    str = '待确认';
                }
                if(value==='1'){
                    str = '待发货';
                }
                if(value==='2'){
                    str = '已发货';
                }
                if(value==='3'){
                    str = '已签收';
                }
                if(value==='4'){
                    str = '退货中';
                }
                if(value==='5'){
                    str = '已退货';
                }
                if(value==='6'){
                    str = '取消交易中';
                }
                if(value==='7'){
                    str = '已取消';
                }
                if(value==='8'){
                    str = '退货待确认';
                }
                return str;
            },
            invoiceState(value){
                let str = '';
                if(value==='0'){
                    str = '否';
                }
                if(value==='1'){
                    str = '是';
                }
                return str;
            },
            getCurrentTime(value){
              return pub.getCurrentTime(value);
            },
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });

                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 分页获取订单
            getData(pageNumber){
                this.loadopen();
                this.config.get('/center/goldRecord/list', {
                    pageNo: pageNumber?pageNumber:1,
                    startTime:this.dateTime[0]?this.dateTime[0]:'',
                    endTime:this.dateTime[1]?this.dateTime[1]:'',
                    type:this.type,
                    orderNo:this.orderNo,
                    mobile:this.mobile,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.status===1){
                        this.tableData = res.data.data.goldRecords;
                        this.pageSize = res.data.data.pageSize;
                        this.totalRow = res.data.data.totalCount;
                        this.currentPage1 = res.data.data.currentPage;

                        this.recharge = res.data.data.recharge;
                        this.consume = res.data.data.consume;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                }).catch(err=>{
                    this.loadclose();
                    this.$message.error('网络错误');
                    this.$router.push('/login');
                })
            },
            // 搜索
            search() {
                this.getData(1);
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 查看订单详情
            handleEdit(index,row){
                this.editVisible = true;
                this.uid = row;
                setTimeout(()=>{
                    this.$refs.managerAdd.getInfo();
                }, 200);
            },
            // 确认订单
            confirmOrder(row,type){
                let text = '';
                if(type==='1') text = '确认受理？';
                if(type==='4') text = '确认完成？';
                if(type==='5') text = '确认撤销？';
                this.$confirm(text, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loadopen();
                    this.config.post('/center/info/update', {
                        id: row.id,
                        type: type,  // 1待服务 4完成 5撤销
                    }).then(res=>{
                        this.loadclose();
                        if(res.data.status===1){
                            this.$message.success(res.data.message);
                            this.getData('1');
                        }else {
                            this.$message.error(this.config.handleError(res.data));
                        }
                    })
                }).catch(() => {
                });
            },
            // 发货
            sendOut(row){
                this.$confirm('确认撤销?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            // 处理取消订单
            HandleCancelOrder(row){
                this.cancelOrder = true;
                this.uid = row.id;
                this.state = row.order_status;
                this.diaTitle = this.state==8?'处理退货请求':'处理取消订单'
                setTimeout(()=>{
                    this.$refs.managerAdd.getInfo();
                }, 200);
            },
            // 修改地址
            updateAddress(row){
                this.updataAdd = true
                this.editInfo = row
                this.name= row.detail_address
            },
            // 子组件选择地址完成
            choosed(obj){
                this.editInfo.provinces_id = obj.provinceid;
                this.editInfo.cities_id = obj.cityid;
                this.editInfo.areas_id = obj.areaid;
                console.log(this.editInfo)
            },
            // 确认修改收货地址
            submitForm(){
                let obj = {
                    'order.id':this.editInfo.id,
                    'order.provinces_id':this.editInfo.provinces_id,
                    'order.cities_id':this.editInfo.cities_id,
                    'order.areas_id':this.editInfo.areas_id,
                    'order.detail_address':this.name,
                }
                this.config.post('/supply/order/updateAddress', obj).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.roleDone()
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            resetForm(){
                this.$message({
                    showClose: true,
                    message: '已取消修改地址'
                });
            },
            // 查看完成（子组件调用此方法）
            roleDone(str) {
                this.editVisible = false;
                this.cancelOrder = false;
                this.updataAdd = false;
                this.getData();
            },
            // 根據id獲取省
            getPro(item){
                this.config.get('/common/address/getProvinces',{id:item.provinces_id}).then((res)=>{
                    if(res.data.code=='0'){
                        item.province = res.data.obj.province
                    }
                }).catch(err=>{
                    console.log(err)
                });
            },
            // 根據id獲取市
            getCity(item){
                this.config.get('/common/address/getCitis',{provinceid:item.provinces_id,id:item.cities_id}).then((res)=>{
                    if(res.data.code=='0'){
                        item.city = res.data.obj.city
                    }
                }).catch(err=>{
                    console.log(err)
                });
            },
            // 根據id獲取地區
            getArea(item){
                this.config.get('/common/address/getAreas',{cityid:item.cities_id,id:item.areas_id}).then((res)=>{
                    if(res.data.code=='0') item.area = res.data.obj.area
                }).catch(err=>{
                    console.log(err)
                });
            },
        },
        mounted(){
            bus.$on('websocketMsg', msg=>{
                this.getData('1');
            });

            this.getCurrentTime = this.config.getCurrentTime;
        }
    }
</script>
<style>
    .handle-input {
        width:200px;
    }
    .el-date-editor--datetimerange.el-input__inner{
        width:300px;
    }
    .el-date-range-picker.has-sidebar{
        width:650px;
    }
    .el-picker-panel__sidebar{
        width: 90px;
    }
    .red{
        color: #ff0000;
    }
    .green{
        color: #67C23A;
    }
    .orange{
        color: #E6A23C;
    }

    /*统计卡片*/
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }
</style>
